// import skeleton from './xtx-skeleton'
// import carousel from './xtx-carousel'
// import more from './xtx-more'
// import bread from './xtx-bread'
// import bread_item from './xtx-bread-item'

import defaultImg from '@/assets/images/200.png'

// 自动化批量导入
const importFn = require.context('./', false, /\.vue$/) // 目录路径 是否加载子目录 加载文件的正则

export default {
  install(app) {
    // app.component(skeleton.name, skeleton)
    // app.component(carousel.name, carousel)
    // app.component(more.name, more)
    // app.component(bread.name, bread)
    // app.component(bread_item.name, bread_item)
    importFn.keys().forEach((path) => {
      // 拿到所有路径
      const component = importFn(path).default //根据路径拿到组件
      app.component(component.name, component)
    })
    // 定义指令
    defineDirective(app)
  }
}

// 定义指令的方法
const defineDirective = (app) => {
  // 原理:先存储图片地址 当图片进入可视区将地址设置给图片
  app.directive('lazy', {
    //vue2中是inserted vue3中是mounted
    mounted(el, binding) {
      //创建一个观察对象  第一个函数参数是观察对象数组
      const observe = new IntersectionObserver(
        ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 停止观察
            observe.unobserve(el)
            // 处理图片加载失败  error  load
            el.onerror = () => {
              el.src = defaultImg
            }
            // 将地址设置给图片  binding.value就                                                                                            指令的值
            el.src = binding.value
          }
        },
        {
          threshold: 0 //进入可视区的比例
        }
      )
      // 给元素开启观察
      observe.observe(el)
    }
  })
}
